<template>
  <div class="captcha-component">
    <div v-if="type === 'SLIDER'" class="captcha-template">
      <SliderCaptchaTemplate
          :baseStyle="captcha.baseStyle"
           :captchaData="captcha.captchaData"
           ref="sliderCaptcha"
           @closeCaptcha="closeCaptcha"
           @refreshCaptcha="refreshCaptcha"
           @validateCaptcha="validateCaptcha">
      </SliderCaptchaTemplate>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, watch,onMounted} from 'vue'
import SliderCaptchaTemplate from './children/SliderCaptchaTemplate'
const props = defineProps({
  /** 验证码类型 */
  // SLIDER、ROTATE_DEGREE、CONCAT、ROTATE
  type: {
    type: String,
    default: 'SLIDER'
  },
  /** 验证码标题 */
  title: {
    type: String,
    default: '拖动滑块完成拼图'
  },
  /** 标题水平方向（justify-content 选值），flex-start、center、flex-end */
  titleAlign: {
    type: String,
    default: 'center'
  },
  /** 验证码标题字体 */
  titleFontSize: {
    type: Number,
    default: 15
  },
  /** 验证码标题字体颜色 */
  titleColor: {
    type: String,
    default: 'rgb(230, 162, 60)'
  },
  /** 标题字体粗细 */
  titleWeight: {
    type: String,
    default: 'bold'
  },
  /** 背景图片 */
  bgImage: {
    type: String,
    default: 'https://minio.tianai.cloud/public/captcha-btn/btn3-bg.jpg'
  },
  /** 验证码宽度 */
  width: {
    type: Number,
    default: 300
  },
  /** 验证码高度 */
  height: {
    type: Number,
    default: 300
  },
  /** 验证码边距 */
  margin: {
    type: Number,
    default: 20
  },
  /** 圆角 */
  borderRadius: {
    type: Number,
    default: 10
  },
  /** 滑块背景图  */
  moveBtnImg: {
    type: String,
    default: 'https://minio.tianai.cloud/public/captcha-btn/btn3.png'
  },
  /** 滑块图片宽度 */
  moveBtnImgWidth: {
    type: Number,
    default: 53
  },
  /** 滑块图片高度 */
  moveBtnImgHeight: {
    type: Number,
    default: 38
  },
  /** 滑块滑过的border样式 */
  trackerColor: {
    type: String,
    default: '#ef9c0d'
  },
  /** 滑块滑过的背景样式 */
  trackerBgColor: {
    type: String,
    default: '#f7b645'
  }
})
const captcha = ref({
  baseStyle: {},
  captchaData: {},
  captchaType: null
})
const sliderCaptcha = ref()

const init = () => {
  // 初始化基础数据
  captcha.value.baseStyle = {
    title: props.title,
    titleFontSize: props.titleFontSize,
    titleColor: props.titleColor,
    titleAlign: props.titleAlign,
    width: props.width,
    height: props.height,
    margin: props.margin,
    borderRadius: props.borderRadius,
    bgImage: props.bgImage,
    moveBtnImg: props.moveBtnImg,
    moveBtnImgWidth: props.moveBtnImgWidth,
    moveBtnImgHeight: props.moveBtnImgHeight,
    trackerColor: props.trackerColor,
    trackerBgColor: props.trackerBgColor
  }
  // 生成验证码
  getCode();
}

const getCode = () => {
  // gen(captcha.value.captchaType).then(res => {
  //   if (res) {
  //     // this.captchaType = this.captchaType;
  //     captcha.value.captchaData = {
  //       type: captcha.value.captchaType,
  //       captchaId: res.data.id,
  //       captchaBackgroundImage: res.data.captcha.backgroundImage,
  //       captchaBackgroundImageWidth: res.data.captcha.backgroundImageWidth,
  //       captchaBackgroundImageHeight: res.data.captcha.backgroundImageHeight,
  //       captchaTemplateImage: res.data.captcha.sliderImage,
  //       captchaTemplateImageWidth: res.data.captcha.sliderImageHeight,
  //       captchaTemplateImageHeight: res.data.captcha.sliderImageWidth,
  //       data: res.data.captcha.data
  //     }
  //   } else {
  //     console.log("生成验证码失败！")
  //   }
  // })
}
// 关闭验证码
const closeCaptcha = () => {
  this.$emit("closeCaptcha");
}
// 刷新验证码
const refreshCaptcha = () => {
  getCode();
}

// 验证
const validateCaptcha = (data) => {
  data.captchaId = captcha.value.captchaData.captchaId;
  data.type = captcha.value.captchaData.type;
  // check(data.captchaId, data).then(res => {
  //   console.log("check ===>", res);
  //   if (res.status === 200) {
  //     if (!res.data) {
  //       this.refreshCaptcha();
  //     }
  //     this.$emit("validateCaptcha", res.data)
  //   }
  // })

  if (data.type == 'SLIDER') {
    sliderCaptcha.value.reset()
  } else if (data.type == 'ROTATE') {

  } else if (data.type == 'CONCAT') {

  }
}

onMounted(()=>{
  // 执行初始化
  init()
})

</script>

<style scoped>
.captcha-template {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>